﻿ @{
    ViewBag.Title = "PersonalSchedule";
}
@model List<Scheduling.Models.Booking>
<table style="width:100%; border:none; " cellspacing="0">
    <tr>
        <td style="vertical-align:top;">
            <table class="Table" cellspacing="0">
                <tr>
                    <th>Course</th>
                    <th>Room</th>
                    <th>Time</th>
                    <th></th>
                </tr>
                
                    @{foreach(var booking in ViewData.Model) {
                        <tr onclick="location.href='@Href("~/Booking/Show/" + booking.ID)'" class="Clickable">
                            <td style="width:110px;">
                                @booking.CourseInstance.Course.ID
                            </td>
                            <td style="width:90px;">
                                @booking.Room.ID
                            </td>
                            <td>
                                @if (booking.StartDate.Date == booking.EndDate.Date){
                                    @booking.StartDate.ToShortDateString() <text> ( </text>
                                    @booking.StartDate.ToShortTimeString() <text>-</text> 
                                    @booking.EndDate.ToShortTimeString() <text> ) </text>
                                }else{
                                    @booking.StartDate <text> - </text>
                                    @booking.EndDate
                                }
                            </td>
                        </tr>
                    }
                }
            </table>
        </td>
        @if (ViewData["nosearch"] == null)
        {
            <td style="vertical-align:top; width:200px;">
                <div style="margin:8px;" class="Box">
                    <h3>Search for Course</h3>
                    <table style="border:none;">
                        <tr>
                            <td>
                                <input id="inSearch" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="button" value="Search" onclick="search()" />
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="Results" style="margin:8px;" class="Box">
                
                </div>
                <div id="Courses" style="margin:8px;" class="Box">
                
                </div>
            </td>
        }
    </tr>
</table>

<script type="text/javascript">
    function loadCourses() {
        $.ajax({
            method: "get",
            url: "/Home/CourseList/" + IDs,
            success: function (result) {
                $("#Courses").html(result);
            }
        });
    }
    function search() {
        $("#Results").hide();
        $.ajax({
            method: "get",
            url: "/Home/Search/" + $("#inSearch").val(),
            success: function (result) {
                $("#Results").html(result);

                if ($("#Results").html().length > 5)
                    $("#Results").show();
            }
        });
    }


    loadCourses();
    $("#Results").hide();
</script>